<template>
	<div class="flex flex-col">
		<a-button class="border-none" @click="goToRpaDetail">{{ $t('user.verification-code.required1115661105774') }}
		</a-button>
		<a-drawer :title="$t('user.email.wrong-format23455454')" :visible="visibleq" width="90%" @close="rollback">
			<!-- form表单信息 -->
			<a-form layout="inline" :form="form" class="drawer-form" label-align="left">
				<a-descriptions bordered>
					<a-descriptions-item label="RPA ID">
						{{ rpaInfos.RpaId }}
					</a-descriptions-item>
					<a-descriptions-item :label="$t('user.password.strength.medium')">
						{{ rpaInfos.RpaName }}
					</a-descriptions-item>
					<a-descriptions-item :label="$t('user.login.remember-me')">
						{{
							rpaInfos.RpaDataControllerStr == ''
							? '-'
							: rpaInfos.RpaDataControllerStr?.split(',')
								.reduce((pre, cur) => {
									return pre.concat(
										cur === 'Other'
											? cur +
											`:${rpaInfos.RpaDataControllerOther}`
											: cur
									)
								}, [])
								.join(',')
						}}
					</a-descriptions-item>
					<a-descriptions-item :label="$t('user.password.strength.low1114545')">
						{{
							rpaInfos.RpaLeaderMasterStr == ''
							? '-'
							: rpaInfos.RpaLeaderMasterStr
						}}
					</a-descriptions-item>
					<a-descriptions-item :label="$t('user.password.strength.low222q3214')">
						{{
							rpaInfos.RpaLeaderRetinueStr == ''
							? '-'
							: rpaInfos.RpaLeaderRetinueStr
						}}
					</a-descriptions-item>
					<a-descriptions-item :label="$t(
								'user.verification-code.required1115661105773714413123'
							)
							">
						{{
							rpaInfos.RpaNumberStr == ''
							? '-'
							: lang
								? rpaInfos.RpaNumberStr?.split('/')[0]
								: rpaInfos.RpaNumberStr?.split('/')[1]
									? rpaInfos.RpaNumberStr?.split('/')[1]
									: rpaInfos.RpaNumberStr?.split('/')[0]
						}}
					</a-descriptions-item>
					<a-descriptions-item :label="$t(
										'user.verification-code.required1115661105773714422'
									)
									">
						{{
							rpaInfos.RpaCollectionChannels == '1'
							? $t('user.v163')
							: $t('user.v164')
						}}
					</a-descriptions-item>
					<a-descriptions-item :label="$t(
								'user.verification-code.required1115661105773714419'
							)
							">
						<span v-if="lang">
							{{
								rpaInfos.RpaSystemNetworkStr == ''
								? '-'
								: rpaInfos.RpaSystemNetworkStr
							}}
						</span>
						<span v-else>
							{{
								rpaInfos.RpaSystemNetworkStrEn == ''
								? '-'
								: rpaInfos.RpaSystemNetworkStrEn
							}}
						</span>
					</a-descriptions-item>

					<a-descriptions-item :label="$t(
								'user.verification-code.required111566110577371441167547'
							)
							">
						{{
							rpaInfos.RpaStoragePeriod == ''
							? '-'
							: rpaInfos.RpaStoragePeriod
						}}
					</a-descriptions-item>
					<a-descriptions-item :label="$t(
								'user.verification-code.required1115661105773714416'
							)
							">
						<span v-if="lang">
							{{
								rpaInfos.RpaSensitiveNumberStr == ''
								? '-'
								: rpaInfos.RpaSensitiveNumberStr?.split(
									'/'
								)[0]
							}}
						</span>
						<span v-else>
							{{
								rpaInfos.RpaSensitiveNumberStrEn == ''
								? '-'
								: rpaInfos.RpaSensitiveNumberStrEn
									? rpaInfos.RpaSensitiveNumberStrEn
									: rpaInfos.RpaSensitiveNumberStr?.split(
										'/'
									)[1]
										? rpaInfos.RpaSensitiveNumberStr?.split(
											'/'
										)[1]
										: rpaInfos.RpaSensitiveNumberStr
							}}
						</span>
					</a-descriptions-item>
					<a-descriptions-item :label="$t(
										'user.verification-code.required11156611057737144123123'
									)
									">
						<span v-if="lang">
							{{
								rpaInfos.RpaProcessingActivityCycleStr == ''
								? '-'
								: rpaInfos.RpaProcessingActivityCycleStr
							}}
						</span>
						<span v-else>
							{{
								rpaInfos.RpaProcessingActivityCycleStrEn == ''
								? '-'
								: rpaInfos.RpaProcessingActivityCycleStrEn
							}}
						</span>
					</a-descriptions-item>
					<a-descriptions-item :label="$t(
								'user.verification-code.required111566110577371447'
							)
							">
						{{
							rpaInfos.RpaFrequency == ''
							? '-'
							: rpaInfos.RpaFrequency
						}}
					</a-descriptions-item>
					<a-descriptions-item :span="3" :label="$t('user.verification-code.required1122')">
						{{
							rpaInfos.RpaObjective == ''
							? '-'
							: rpaInfos.RpaObjective ===
								'其他【请补充说明】' ||
								rpaInfos.RpaObjective === 'bussic.target.h'
								? $t('bussic.target.h')
								: $t(rpaInfos.RpaObjective)
						}}
					</a-descriptions-item>
					<a-descriptions-item :span="3" :label="$t('bussic.target.supplement')" v-if="rpaInfos.RpaObjective === '其他【请补充说明】' ||
								rpaInfos.RpaObjective === 'bussic.target.h'
								">
						{{ rpaInfos.RpaObjectiveOther }}
					</a-descriptions-item>

					<a-descriptions-item :span="3" :label="$t('user.verification-code.requiredtuoxuanone111')
						">
						<div v-for="(item, index) in fileLists" :key="index" style="display: inline-block;">
							<a style="color: #5077a5;" :href="item.url">{{ item.name }}；</a>
						</div>
						<br>
						{{ rpaInfos.RpaDataFlowDiagramDescribe }}
					</a-descriptions-item>
					<a-descriptions-item :span="3" :label="$t('user.verification-code.requiredtuoxuanone222')
						">
						<div v-for="(item, index) in RpaSystemFileLists" :key="index" style="display: inline-block;">
							<a style="color: #5077a5;" :href="item.url">{{ item.name }}；</a>
						</div>
						<!-- <a :href="rpaInfos.RpaSystemArchitectureUrl">{{ rpaInfos.RpaSystemArchitectureUrl }}</a> -->
						<br>
						{{ rpaInfos.RpaSystemArchitectureDescribe }}
					</a-descriptions-item>
				</a-descriptions>
				<br />
				<!-- 请提供数据流程图或说明 -->
				<!-- || rpaInfos.RpaNoPIOrImportantInvolved == 0  -->
				<div v-if="Pia">
					{{ $t('user.register.email.placeholder') }}
				</div>
				<!-- {{
          rpaInfos.RpaIfCompletedPIA == 0 ? "1" : ""
        }} -->

				<a-form-item v-if="Pia">
					<a-table size="middle" class="h-full overflow-x-auto" :data-source="rpaInfos.RpaDataDetail"
						:pagination="false" bordered :rowKey="(record) => record.Id">
						<a-table-column key="DataAssetsId" data-index="DataAssetsId" width="150">
							<span slot="title">{{
								$t(
									'user.verification-code.required111566110577136'
								)
							}}</span>
						</a-table-column>
						<a-table-column key="DataItemStr" data-index="DataItemStr" width="150">
							<span slot="title">{{
								$t('app.setting.themecolor.dust')
							}}</span>
							<template slot-scope="text, record">
								<span v-if="lang">
									{{ record.DataItemStr }}
								</span>
								<span v-else>
									{{ record.DataItemsStrEn }}
								</span>
							</template>
						</a-table-column>
						<a-table-column key="DataLevelStr" data-index="DataLevelStr" width="150">
							<span slot="title">{{
								$t(
									'user.verification-code.required111566110577137'
								)
							}}</span>
						</a-table-column>
						<a-table-column key="DataSensitivityStr" data-index="DataSensitivityStr" width="150">
							<span slot="title">{{
								$t(
									'user.verification-code.required111566110577138'
								)
							}}</span>
						</a-table-column>
						<a-table-column key="DetailNecessity" data-index="DetailNecessity" width="150">
							<span slot="title">{{
								$t(
									'user.verification-code.required1115661105771399999'
								)
							}}</span>
						</a-table-column>
						<a-table-column key="CityStr" data-index="CityStr" width="150">
							<span slot="title">{{
								$t('user.register.get-verification-codeeeee')
							}}</span>
						</a-table-column>
						<a-table-column key="DataDepositStr" data-index="DataDepositStr" width="150">
							<span slot="title">{{
								$t(
									'user.verification-code.required1115661105771400000'
								)
							}}</span>
						</a-table-column>
						<a-table-column key="SourceStr" data-index="SourceStr" width="150">
							<span slot="title">{{
								$t('user.register-result.msg')
							}}</span>
						</a-table-column>
						<a-table-column key="DataDestinationStr" data-index="DataDestinationStr" width="150">
							<span slot="title">{{
								$t('user.register-result.activation-email')
							}}</span>
						</a-table-column>
					</a-table>
				</a-form-item>
				<br />
				<br />
				<div class="checkbox" v-if="Pia">
					<a-form-item v-if="lang">
						<span slot="label" style="white-space: normal">{{
							$t('user.verification-code.required1133')
						}}</span>
						<a-checkbox-group class="mt-[20px]" v-model="rpaInfos.RpaActivityCycle" name="checkboxgroup"
							:options="dataProcessingActivityCycleData" disabled />
					</a-form-item>
					<a-form-item v-else class="flex-item">
						<span slot="label" style="white-space: normal">{{
							$t('user.verification-code.required1133')
						}}</span>
						<a-checkbox-group class="mt-[20px]" v-model="rpaInfos.RpaActivityCycle" name="checkboxgroup"
							:options="dataProcessingActivityCycleDataEn" disabled />
					</a-form-item>
					<br />
					<a-form-item v-if="lang">
						<span slot="label" style="white-space: normal">{{
							$t('user.verification-code.required1155')
						}}</span>
						<a-checkbox-group class="mt-[19px]" disabled v-model="rpaInfos.RpaActivityType" name="checkboxgroup"
							:options="processingActivityTypesData" />
					</a-form-item>
					<a-form-item v-else class="flex-item">
						<span slot="label" style="white-space: normal">{{
							$t('user.verification-code.required1155')
						}}</span>
						<a-checkbox-group :class="ind === 1 ? ' mt-[19px]' : ''" disabled v-model="rpaInfos.RpaActivityType"
							name="checkboxgroup" v-for="ind in Math.ceil(
								processingActivityTypesDataEn.length / 4
							)" :key="ind + processingActivityTypesDataEn[ind]" :options="processingActivityTypesDataEn.slice(
	4 * ind - 4,
	4 * ind
)
	" />
					</a-form-item>
				</div>
				<div class="checkbox" v-if="rpaInfos.RpaIfCompletedPIA == 1">
					<span slot="label" style="white-space: normal">If the acitivity completed Privacy Impact Assessment
						(PIA) ?</span>
					<br />
					<span>Please Provide PIA Link</span>
					<br />
					<a-textarea v-model="rpaInfos.RpaPIALinkUrl" :auto-size="{ minRows: 3, maxRows: 7 }"
						style="width: 490px" disabled />
				</div>
				<div class="checkbox" v-if="rpaInfos.RpaNoPIOrImportantInvolved == 1">
					<span>{{
						$t('user.verification-code.requiredLuck2311')
					}}</span>
					<a-popover title="Personal Information" placement="bottom" trigger="click"
						:overlayStyle="{ width: '30%' }">
						<template #content style="width: 300px">
							<p>
								{{
									$t('user.verification-code.requiredLuck16')
								}}
							</p>
						</template>
						<a-button type="link" style="padding: 0 2px">{{
							$t('user.verification-code.requiredLuck2333')
						}}</a-button>
					</a-popover>
					<span>{{
						$t('user.verification-code.requiredLuck2322')
					}}</span>
					<a-popover title="Important Data" placement="bottom" trigger="click" :overlayStyle="{ width: '30%' }">
						<template #content style="width: 300px">
							<p>
								{{
									$t('user.verification-code.requiredLuck17')
								}}
							</p>
							<p>
								{{
									$t('user.verification-code.requiredLuck18')
								}}
							</p>
							<p>
								{{
									$t('user.verification-code.requiredLuck19')
								}}
							</p>
							<p>
								{{
									$t('user.verification-code.requiredLuck20')
								}}
							</p>
							<p>
								{{
									$t('user.verification-code.requiredLuck21')
								}}
							</p>
							<p>
								{{
									$t('user.verification-code.requiredLuck22')
								}}
							</p>
							<p>
								{{
									$t('user.verification-code.requiredLuck23')
								}}
							</p>
						</template>
						<a-button type="link" style="padding: 0 2px">{{
							$t('user.verification-code.requiredLuck2344')
						}}</a-button>
					</a-popover>
					{{ $t('user.verification-code.requiredLuck2355') }}
					<br />
					<span slot="label" style="white-space: normal">{{
						$t('user.verification-code.requiredLuck1515')
					}}</span>
					<br />
					<a-textarea v-model="rpaInfos.RpaNoPIDescProcessedData" :auto-size="{ minRows: 3, maxRows: 7 }"
						style="width: 490px" disabled />
				</div>
			</a-form>
			<div :style="{
				position: 'absolute',
				right: 0,
				bottom: 0,
				width: '100%',
				borderTop: '1px solid #e9e9e9',
				padding: '10px 16px',
				background: '#fff',
				textAlign: 'center',
				zIndex: 1,
			}">
				<!-- <a-button type="primary" :disabled="Type == 0" style="margin-right: 8px" @click="Select()">{{
					$t('user.verification-code.required111566110577135') }}
				</a-button> -->
				<a-button type="primary" style="margin-right: 8px" @click="rollback">{{ $t('app.setting.themecolor.rr') }}
				</a-button>
			</div>
		</a-drawer>
	</div>
</template>

<script>
import { configurationSelect } from '@/api/configs'
import { quesionFindRpaId, rpaDetail } from '@/api/rpa/form'

export default {
	props: {
		rpaDetailId: {
			type: String,
		},
		DpiaCommentsTypeStr: {
			type: Array,
		},
	},
	components: {},
	data() {
		return {
			// RPA信息
			rpaInfos: {},
			// 创建DPIA问卷状态
			createQuestionStatus: false,
			dpiaId: undefined,
			rpaId: '',
			// 默认不传ID
			types: false,
			// 下面这些都是通用的
			form: this.$form.createForm(this),
			rowSelection: {
				onChange: (selectedRowKeys, selectedRows) => {
					this.selectedRowKeys = selectedRows
				},
			},
			visibleq: false,
			// DI导入列表
			diDataLists: [],
			// 标题
			selectedRowKeys: [],
			pagination: {
				page: 1,
				pageSize: 10,
				total: 0,
			},
			userList: [],
			rpaDidataLists: [],
			visible: false,
			//表格Loading
			listLoading: false,
			loading: false,
			orderInfo: {},
			drugList: [],
			trackList: [],
			systemTimeline: [],
			botTimeline: [],
			trackKey: '',
			// 原始数据
			systemControllerSourceData: [],
			collectionChannelsSourceData: [],
			dataProcessingActivityCycleData: [],
			processingActivityTypesData: [],
			dataProcessingActivityCycleDataEn: [],
			processingActivityTypesDataEn: [],
			detailStatus: false,
			lang: localStorage.getItem('lang').includes('zh-CN'),
			Pia: true,
			Type: 0,
			DpiaRpaId: '',
			fileLists: [],
			RpaSystemFileLists: []
		}
	},
	methods: {
		async Select() {
			console.log(this.DpiaCommentsTypeStr)
			this.$router.push({
				path: '/rpa/detail',
				query: {
					state: 'edit',
					id: this.DpiaRpaId,
					itLang: this.itLang,
					Re: 1,
				},
			})
		},
		async goToRpaDetail() {
			if (localStorage.getItem('lang') == '"zh-CN"') {
				this.itLang = true
			} else if (localStorage.getItem('lang') == '"zh-EN"') {
				this.itLang = false
			}
			this.fileLists =[]
			this.RpaSystemFileLists =[]
			this.visibleq = true
			// 根据问卷ID查RPA的ID
			const { data } = await quesionFindRpaId({ Id: this.rpaDetailId })
			console.log(this.DpiaCommentsTypeStr)
			if (this.DpiaCommentsTypeStr != undefined) {
				let DpiaCommentsTypeStr = this.DpiaCommentsTypeStr
				this.DpiaRpaId = data.DpiaRpaId
				DpiaCommentsTypeStr.map((item, index) => {
					if (item.DpiaCommentsTypeStr == '退回') {
						this.Type = 1
					}
				})
			}

			// 获取RPA详情
			const { data: rpaDetailInfo } = await rpaDetail({
				Id: data.DpiaRpaId,
			})
			if (
				rpaDetailInfo.RpaIfCompletedPIA == 1 ||
				rpaDetailInfo.RpaNoPIOrImportantInvolved == 1
			) {
				this.Pia = false
			}
			if (rpaDetailInfo.RpaUpload) {
				rpaDetailInfo.RpaUpload.forEach((item, index) => {
					if (item.RpaUploadType == 1) {
						let name = item.RpaUploadUrl.split('/').slice(-1)
						this.fileLists.push({
							Id: item.Id,
							uid: index,
							name: name[0],
							status: 'done',
							url: item.RpaUploadUrl,
							RpaUploadType: 1,
						})
						console.log(name)
					} else {
						let name = item.RpaUploadUrl.split('/').slice(-1)
						this.RpaSystemFileLists.push({
							Id: item.Id,
							uid: index,
							name: name[0],
							status: 'done',
							url: item.RpaUploadUrl,
							RpaUploadType: 2,
						})
					}
				})
			}
			this.rpaInfos = rpaDetailInfo

			// 加载数据处理活动周期
			const { data: dataProcessingActivityCycleDataEn } =
				await configurationSelect({ state: 6, types: 1 })

			// 加载数据处理活动类型
			const { data: processingActivityTypesDataEn } =
				await configurationSelect({ state: 7, types: 1 })

			// 加载数据处理活动周期
			const { data: dataProcessingActivityCycleData } =
				await configurationSelect({ state: 6 })

			// 加载数据处理活动类型
			const { data: processingActivityTypesData } =
				await configurationSelect({
					state: 7,
				})

			this.dataProcessingActivityCycleData =
				dataProcessingActivityCycleData
			this.dataProcessingActivityCycleDataEn =
				dataProcessingActivityCycleDataEn
			this.processingActivityTypesData = processingActivityTypesData
			this.processingActivityTypesDataEn = processingActivityTypesDataEn
		},
		rollback() {
			if (this.visibleq) {
				this.visibleq = false
			} else {
				this.visibleq = true
			}
		},
	},
	mounted() {
		let that = this
		window.addEventListener('setItemEvent', function (e) {
			if (e.key == 'lang') {
				let lang = JSON.parse(e.value)
				console.log(lang)
				if (lang == 'zh-EN') {
					that.lang = false
				} else {
					that.lang = true
				}
			}
		})
	},
}
</script>
<style lang="less" scoped>
.border-none {
	border: 1px solid rgba(36, 89, 229, 1);
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.card {
	display: flex;
	align-items: center;
	border-radius: 8px;
	box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
	padding: 20px;
	padding-right: 150px;

	h4 {
		font-size: 30px;
	}

	p {
		font-size: 16px;
		color: #999;
	}
}

/deep/ .drawer-form {
	margin-bottom: 50px;

	.ant-form-item {
		margin-right: 10px;
	}

	.ant-form-item-label {
		display: inline-block;
		line-height: 20px;
		width: 100px;
		margin-right: 10px;
		margin-top: 10px;
		margin-left: 10px;
	}

	.checkbox {
		background: #eee;
		padding: 10px;
		margin-top: 16px;
		position: relative;
		top: -10px;

		.ant-form-item-label {
			display: inline-block;
			line-height: 40px;
			width: 150px;
			// margin-right: 10px;
		}
	}
}

/deep/ .ant-table-thead {
	background: #f4f7ff;
	font-weight: 700;
}

.import-butoon {
	margin-top: 13px;
}

.table-di {
	margin-top: 13px;
}

.ty {
	width: 13px;
	height: 13px;
	opacity: 1;
	background: rgba(255, 255, 255, 1);
	border: 4px solid #5076a5;
	border-radius: 50%;
}

.tags {
	left: 298px;
	top: 288px;
	width: 6px;
	height: 14px;
	opacity: 1;
	border-radius: 2px;
	background: rgba(0, 80, 247, 1);
}

/deep/ .ant-form-item-label {
	overflow: visible !important;
}

/deep/ .ant-col ant-form-item-label .ant-form-item-label-left {
	margin-right: 67px;
}

:deep(.flex-item) {
	display: flex;

	.ant-form-item-label-left {
		min-width: 150px;
	}
}
</style>
